import React from "react";
import {useState} from "react";
import "./styles.scss"
import {useNavigate} from "react-router-dom";
function TopBar(){
    const imgs = require("../resources/菜单.png");
    let navigate=useNavigate();
    let [show,setShow]=useState(false);
    let ToVoice=()=>{
        navigate("/")
    }
    let ToBlog=()=>{
        navigate("/blog")
    }
    let showLeftBar=()=>{
        setShow(true)



    }
    let hideLeftBar=()=>{
        setShow(false)

    }
    return(
        <>
            <div className={show ? "LeftBarShow" : "LeftBarHide"} onMouseEnter={showLeftBar} onMouseLeave={hideLeftBar}>
                <div className="routeBox">
                    <div className="VoiceLink" onClick={ToVoice}>花玲按钮</div>
                    <div className="VoiceLink" onClick={ToBlog}>最新动态</div>
                </div>
            </div>
            <div className="topBar">
                <div className="TopButton menu" onMouseEnter={showLeftBar} onMouseLeave={hideLeftBar}>
                    <img src={imgs} alt="none"/>
                </div>
                <div className="theme">Kalinfans</div>

            </div>
        </>
    )
}
export default TopBar;